<template>
	<view class="shopList">
		<scroll-view scroll-x="true" class="scroll">
			<view class="item" v-for="(item,index) in dataList" :key='index' @click="open(item.pk_id)">
				<image class="item-img" :src="item.logo || img" mode="aspectFill"></image>
				<view class="item-title">
					<view class="title u-line-1">{{item.name}}</view>
					<!-- <view class="ftitle">在售商品{{item.pro_count}}件</view> -->
					<view class="ftitle u-m-t-5" v-if="parameter.status == 1">距离：{{item.distance?(Number(item.distance) / 1000).toFixed(2)+'km':'不详'}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>

	export default{
		props:{
			dataList:{
				type:Array,
				default:[]
			},
			parameter:{
				type:Object,
				default:()=>{}
			}
		},
		data(){
			return{
				img:require('@/static/icon/shop_img.png')
			}
		},
		methods:{
			open(id){
				this.$linkTo(`/package/index/shopDetail/index?id=${id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.shopList{
		background-color: #fff;
		.scroll{
			white-space: nowrap;
			padding:20rpx;
			/* #ifdef  MP-BAIDU */ 
			min-height: 260rpx;
			/*  #endif  */
			.item{
				width: 300rpx;
				display: inline-block;
				margin-right: 20rpx;
				&:nth-last-of-type(1){
					margin-right: 0;
				}
				.item-img{
					width: 100%;
					height: 180rpx;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
				}
				.item-title{
					display: flex;
					flex-direction: column;
					padding: 10rpx;
					.title{
						font-size: 26rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 10rpx;
					}
					.ftitle{
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>
